<DocMatSlider></DocMatSlider>

<h5 class="mat-h5">Continuous Slider: @Val</h5>
<DemoContainer>
    <Content>
        <MatSlider @bind-Value="@Val"></MatSlider>

        @code
        {

            public decimal Val
            {
                get => _val;
                set
                {
                    _val = value;
                    this.StateHasChanged();
                }
            }

            private decimal _val = 0;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatSlider @bind-Value=""@Val""></MatSlider>

        @code
        {

            public decimal Val
            {
                get => _val;
                set
                {
                    _val = value;
                    this.StateHasChanged();
                }
            }

            private decimal _val = 0;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Initializing the slider with custom ranges/values: @Val2</h5>
<DemoContainer>
    <Content>
        <MatSlider @bind-Value="@Val2" ValueMin="-10" ValueMax="20"></MatSlider>

        @code
        {

            public decimal Val2
            {
                get => _val2;
                set
                {
                    _val2 = value;
                    this.StateHasChanged();
                }
            }

            private decimal _val2 = 0;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatSlider @bind-Value=""@Val2"" ValueMin=""-10"" ValueMax=""20""></MatSlider>

        @code
        {

            public decimal Val2
            {
                get => _val2;
                set
                {
                    _val2 = value;
                    this.StateHasChanged();
                }
            }

            private decimal _val2 = 0;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Discrete Slider: @Val3</h5>
<DemoContainer>
    <Content>
        <MatSlider @bind-Value="@Val3" Discrete="true"></MatSlider>

        @code
        {

            public decimal Val3
            {
                get => _val3;
                set
                {
                    _val3 = value;
                    this.StateHasChanged();
                }
            }

            private decimal _val3 = 0;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatSlider @bind-Value=""@Val3"" Discrete=""true""></MatSlider>

        @code
        {

            public decimal Val3
            {
                get => _val3;
                set
                {
                    _val3 = value;
                    this.StateHasChanged();
                }
            }

            private decimal _val3 = 0;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Using a step value</h5>

    <DemoContainer>
        <Content>
            <MatSlider @bind-Value="@Val4" Step="5" EnableStep="true" ValueMin="0" ValueMax="100"></MatSlider>

            @code
            {

                public decimal Val4
                {
                    get => _val4;
                    set
                    {
                        _val4 = value;
                        this.StateHasChanged();
                    }
                }

                private decimal _val4 = 0;
            }

        </Content>
        <SourceContent>
        	<BlazorFiddle Template="MatBlazor" Code=@(@"
            <MatSlider @bind-Value=""@Val4"" Step=""5"" EnableStep=""true"" ValueMin=""0"" ValueMax=""100""></MatSlider>

            @code
            {

                public decimal Val4
                {
                    get => _val4;
                    set
                    {
                        _val4 = value;
                        this.StateHasChanged();
                    }
                }

                private decimal _val4 = 0;
            }

        ")></BlazorFiddle>
        </SourceContent>
</DemoContainer>
    


<h5 class="mat-h5">Disabled sliders</h5>
<DemoContainer>
    <Content>
        <MatSlider Disabled="true" Value="55"></MatSlider>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatSlider Disabled=""true"" Value=""55""></MatSlider>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">ValueChanged event</h5>
<DemoContainer>
    <Content>
        <MatSlider TValue="decimal" ValueChanged="@OnValueChanged"></MatSlider>

        @code
        {

            public void OnValueChanged(decimal val)
            {
                Console.WriteLine($"OnValueChanged: {val}");
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatSlider TValue=""decimal"" ValueChanged=""@OnValueChanged""></MatSlider>

        @code
        {

            public void OnValueChanged(decimal val)
            {
                Console.WriteLine($""OnValueChanged: {val}"");
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>